<template>
  <div>
    <!-- 搜索框 -->
    <view class="search-wrapper">
      <view class="search-input">
        <icon type="search" size="16"></icon>
        {{keyword}}
      </view>
    </view>
    <!-- tab筛选 -->
    <view class="tab">
      <block v-for="(item,index) in tabs" :key="index">
        <view
          class="tab-item"
          :class="{ active : index == tabIndex}"
          @tap="changeTab(index)"
        >{{item}}</view>
      </block>
    </view>
    <!-- 列表布局 -->
    <view class="goods-list">
      <block v-for="(item,index) in lists" :key="index">
        <view class="goods-item" @tap="godetail(item.goods_id)">
          <image :src="item.goods_small_logo"></image>
          <view class="goods_right">
            <view class="goods-title">{{item.goods_name}}</view>
            <view class="price">￥{{item.goods_price}}.00</view>
          </view>
        </view>
      </block>
    </view>
    <!-- 底部状态的文字提示 -->
    <view class="loading" v-show="hasMore == false">
      我也是有底线的...
    </view>
  </div>
</template>

<script>
import request from "@/utils/request.js";
export default {
  data () {
    return {
      keyword: '',
      tabs:["综合","销量","价格"],
      tabIndex:0,
      lists:[],
      pagenum:1,
      pagesize:20,
      hasMore:true
    }
  },
  onLoad(query) {
    this.keyword = query.keyword;
  //  this.getDate();
  },
  onShow(){
    this.initDate()
  },
  onReachBottom(){
      // 从新发送请求获取数据
    // 拼接数据，显示到页面中
    this.getDate();
  },
 onPullDownRefresh(){
    // 初始化数据
    this.lists = []
    this.pagenum = 1 
    this.hasMore = true
    this.getDate()
    // wx.stopPullDownRefresh()
  },
  methods: {
    changeTab(index){
      this.tabIndex = index;
    },
    getDate(){
      if (!this.hasMore) {
        return;
      }
      // 发送请求过程中，提示加载中
      wx.showLoading({
        title:"加载中",
      });
      //  request('https://www.zhengzhicheng.cn/api/public/v1/goods/search','GET',{
       request.get('goods/search',{
      query:this.keyword,
      pagenum:this.pagenum,
      pagesize:this.pagesize
    }).then(res=> {
      let {goods} = res.data.message;
      this.lists = {...this.lists,...goods}
      console.log(res);
      // this.lists = res.data.message.goods;
      console.log(this.pagenum);
      this.pagenum += 1;
      // 在加载成功后应该还要取下提示
      wx.hideLoading();
      wx.stopPullDownRefresh()
        // 判断是否还要加载更多
        if(goods.length < this.pagesize){
          this.hasMore = false;
        }

    })
    },
    initDate(){
     // 初始化数据
      this.lists = [];
        this.pagenum = 1;
        this.hasMore = true;
        // 重新发送请求
      this.getDate();
    },
    godetail(id){
       wx.navigateTo({
        url: `/pages/detail/main?keyid=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-wrapper {
  background: #eee;
  padding: 20rpx;
  .search-input {
    background: #fff;
    height: 60rpx;
    font-size: 15px;
    color: #999;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
  }
  .search-input icon {
    margin-right: 5px;
  }
}
.tab {
  display: flex;
  border-bottom: 1px #eee solid;
  .tab-item {
    flex: 1;
    text-align: center;
    line-height: 100rpx;
  }
  .active {
    color: red;
  }
}
.goods-list {
  padding-left: 20rpx;
  .goods-item {
    padding: 20rpx 20rpx 20rpx 0;
    display: flex;
    border-bottom: 1px #eee solid;
    image {
      display: block;
      width: 200rpx;
      height: 200rpx;
      flex-shrink: 0;
      margin-right: 20rpx;
    }
    .goods-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .goods-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .price {
        color: red;
        font-size: 14px;
        span {
          font-size: 22px;
        }
      }
    }
  }
}
.loading {
  line-height: 80rpx;
  text-align: center;
  font-size: 14px;
  color: #999;
}
</style>
